<template>
    <div class="terminal-container self">
        <public-title title="睡眠" :theme-type="themeType" />
        <div class="inner">
            <div class="title">
                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
            </div>
            <div class="sleepChart" ref="sleepChart"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import PublicTitle from '/@/components/publicTitle.vue';
    import * as echarts from 'echarts';
    import { ref, watch } from 'vue';
    import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
    import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';

    const { setSession, getSession } = useSession();
    const { PAGE2_RIGHT1 } = caching;
    const props = defineProps({
        orgCode: String,
        type: String,
        themeType: String,
    });
    const sleepChart = ref<HTMLElement>();
    watch(
        props,
        () => {
            init();
        },
        { immediate: true, deep: true }
    );
    const nums = ref({
        avgShort: '',
        avgLong: '',
        avg: '',
    });

    async function init() {
        try {
            const params = {
                orgCode: props.orgCode,
                type: props.type,
            };
            const { code, result } = await getSleep(params);
            if (code == 200 && result.length > 0) {
                setSession(PAGE2_RIGHT1, JSON.stringify(result));
                setValue(result);
            }
        } catch {
            const result = JSON.parse(getSession(PAGE2_RIGHT1));
            setValue(result);
        }
    }

    function setValue(result) {
        let time = result?.map((item) => item.dataDate);
        let short = result?.map((item) => item.avgShortDuration);
        let long = result?.map((item) => item.avgLongDuration);
        let awake = result?.map((item) => item.awakeDuration);
        let avg = result?.map((item) => item.averageDuration);
        initChart({ time, short, long, awake, type: props.type });
        const len = time.length;
        if (!len > 0) {
            return;
        }
        nums.value = {
            avgShort: formatStr({ list: short, len }),
            avgLong: formatStr({ list: long, len }),
            avg: formatStr({ list: avg, len }), //平均
        };
    }

    function initChart({ time, short, long, awake, type }) {
        let myChart = echarts.init(sleepChart.value);
        let options = sleepCharts({ time, short, long, awake, type });
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
</script>
<style scoped lang="less">
    .terminal-container.self {
        position: relative;
        padding-bottom: 0 !important;
    }

    .inner {
        height: calc(100% - 20px);

        .title {
            color: #cfcfcf;
            text-align: left;
            height: 30px;
            line-height: 30px;

            .count {
                font-size: 28px;
                font-weight: bold;
            }

            .lightSleep {
                padding: 3px 0 3px 2%;
            }
        }

        .sleepChart {
            height: 80%;
        }
    }
</style>
